<template>
  <div class="config-container">
    <a-layout class="config-layout">
      <!-- 侧边栏 -->
      <a-layout-sider
        v-model:collapsed="collapsed"
        :trigger="null"
        :width="256"
        :collapsed-width="80"
        collapsible
        class="config-sider"
      >
        <!-- Logo区域 -->
        <div class="logo-wrapper">
          <div class="logo">
            <video-camera-outlined class="logo-icon" />
            <span v-show="!collapsed" class="logo-text">IP CAMERA</span>
          </div>
        </div>

        <!-- 菜单 -->
        <a-menu
          v-model:selectedKeys="selectedKeys"
          v-model:openKeys="openKeys"
          mode="inline"
          theme="dark"
          class="config-menu"
        >
          <!-- 预览 -->
          <a-menu-item key="preview">
            <template #icon>
              <eye-outlined />
            </template>
            <router-link to="/config/preview">实时预览</router-link>
          </a-menu-item>

          <!-- 相机设置 -->
          <a-sub-menu key="camera">
            <template #icon>
              <camera-outlined />
            </template>
            <template #title>相机设置</template>
            <a-menu-item key="video">
              <router-link to="/config/camera/video">视频参数</router-link>
            </a-menu-item>
            <a-menu-item key="osd">
              <router-link to="/config/camera/osd">OSD设置</router-link>
            </a-menu-item>
            <a-menu-item key="audio_param">
              <router-link to="/config/camera/audio_param">音频参数</router-link>
            </a-menu-item>
            <a-menu-item key="audio">
              <router-link to="/config/camera/audio">报警声音</router-link>
            </a-menu-item>
          </a-sub-menu>

          <!-- 网络设置 -->
          <a-sub-menu key="network">
            <template #icon>
              <global-outlined />
            </template>
            <template #title>网络设置</template>
            <a-menu-item key="basic">
              <router-link to="/config/network/basic">基本设置</router-link>
            </a-menu-item>
            <a-menu-item key="gb28181">
              <router-link to="/config/network/gb28181">国标平台</router-link>
            </a-menu-item>
            <a-menu-item key="rtsp">
              <router-link to="/config/network/rtsp">RTSP服务</router-link>
            </a-menu-item>
            <a-menu-item key="rtmp">
              <router-link to="/config/network/rtmp">RTMP推流</router-link>
            </a-menu-item>
          </a-sub-menu>

          <!-- 录像管理 -->
          <a-sub-menu key="record">
            <template #icon>
              <video-camera-outlined />
            </template>
            <template #title>录像管理</template>
            <a-menu-item key="playback">
              <router-link to="/config/record/playback">录像回放</router-link>
            </a-menu-item>
          </a-sub-menu>

          <!-- 智能算法 -->
          <a-sub-menu key="intelligence">
            <template #icon>
              <bulb-outlined />
            </template>
            <template #title>智能算法</template>
            <a-menu-item key="model">
              <router-link to="/config/intelligence/model">自定义算法</router-link>
            </a-menu-item>
            <a-menu-item key="algo">
              <router-link to="/config/intelligence/algo">算法配置</router-link>
            </a-menu-item>
            <a-menu-item key="cloud-model">
              <router-link to="/config/intelligence/cloud-model">云端大模型</router-link>
            </a-menu-item>
          </a-sub-menu>

          <!-- 系统管理 -->
          <a-sub-menu key="system">
            <template #icon>
              <setting-outlined />
            </template>
            <template #title>系统管理</template>
            <a-menu-item key="user">
              <router-link to="/config/system/user">用户管理</router-link>
            </a-menu-item>
            <a-menu-item key="datetime">
              <router-link to="/config/system/datetime">日期设置</router-link>
            </a-menu-item>
            <a-menu-item key="factory_reset">
              <router-link to="/config/system/factory_reset">出厂设置</router-link>
            </a-menu-item>
          </a-sub-menu>

          <!-- 运维中心 -->
          <a-sub-menu key="operations">
            <template #icon>
              <tool-outlined />
            </template>
            <template #title>运维中心</template>
            <a-menu-item key="upgrade">
              <router-link to="/config/operations/upgrade">系统升级</router-link>
            </a-menu-item>
          </a-sub-menu>
        </a-menu>

        <!-- 折叠按钮 -->
        <div class="sider-trigger" @click="collapsed = !collapsed">
          <menu-fold-outlined v-if="!collapsed" />
          <menu-unfold-outlined v-else />
        </div>
      </a-layout-sider>

      <!-- 主内容区 -->
      <a-layout class="main-layout">
        <!-- 顶部栏 -->
        <a-layout-header class="layout-header">
          <div class="header-content">
            <a-breadcrumb class="header-breadcrumb">
              <a-breadcrumb-item>
                <home-outlined />
                <span>配置中心</span>
              </a-breadcrumb-item>
              <a-breadcrumb-item v-if="currentCategory">
                {{ currentCategory }}
              </a-breadcrumb-item>
              <a-breadcrumb-item v-if="currentPath">
                <strong>{{ currentPath }}</strong>
              </a-breadcrumb-item>
            </a-breadcrumb>
            <div class="header-actions">
              <a-tooltip title="刷新">
                <a-button type="text" @click="handleRefresh">
                  <template #icon>
                    <reload-outlined />
                  </template>
                </a-button>
              </a-tooltip>
            </div>
          </div>
        </a-layout-header>

        <!-- 内容区 -->
        <a-layout-content class="layout-content">
          <div class="content-wrapper" :class="{ 'full-width': isPreview }">
            <router-view v-slot="{ Component }">
              <transition name="fade" mode="out-in">
                <component :is="Component" />
              </transition>
            </router-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  VideoCameraOutlined,
  CameraOutlined,
  GlobalOutlined,
  SettingOutlined,
  BulbOutlined,
  ToolOutlined,
  EyeOutlined,
  HomeOutlined,
  ReloadOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons-vue'

const router = useRouter()
const route = useRoute()
const collapsed = ref(false)
const selectedKeys = ref([])
const openKeys = ref(['camera'])
const currentPath = ref('相机设置')

// 路径映射
const pathMap = {
  'preview': '实时预览',
  'video': '视频参数',
  'osd': 'OSD设置',
  'audio_param': '音频参数',
  'audio': '报警声音',
  'basic': '基本设置',
  'gb28181': '国标平台',
  'rtsp': 'RTSP服务',
  'rtmp': 'RTMP推流',
  'upgrade': '系统升级',
  'model': '自定义算法',
  'algo': '算法配置',
  'cloud-model': '云端大模型',
  'user': '用户管理',
  'datetime': '日期设置',
  'factory_reset': '出厂设置',
  'playback': '录像回放'
}

// 分类映射
const categoryMap = {
  'camera': '相机设置',
  'network': '网络设置',
  'record': '录像管理',
  'intelligence': '智能算法',
  'system': '系统管理',
  'operations': '运维中心'
}

// 当前分类
const currentCategory = computed(() => {
  const parts = route.path.split('/')
  if (parts.length >= 3) {
    const category = parts[2]
    return categoryMap[category] || ''
  }
  return ''
})

// 预览/回放页使用全宽（去除内容区 1600px 限制）
const isPreview = computed(() => {
  const p = route.path
  return p.endsWith('/preview') || p.endsWith('/playback')
})

// 监听路由变化
watch(
  () => route.path,
  (path) => {
    const parts = path.split('/')
    const key = parts[parts.length - 1]
    selectedKeys.value = [key]

    if (parts.length >= 3) {
      const parent = parts[2]
      openKeys.value = [parent]
    }

    currentPath.value = pathMap[key] || ''
  },
  { immediate: true }
)

// 刷新页面
const handleRefresh = () => {
  router.go(0)
}
</script>

<style scoped>
.config-container {
  height: 100vh;
  overflow: hidden;
}

.config-layout {
  min-height: 100vh;
}

/* ==================== 侧边栏样式 ==================== */
.config-sider {
  background: #001529;
  position: relative;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
}

.logo-wrapper {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--spacing-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  transition: all var(--transition-base);
}

.logo-icon {
  font-size: 24px;
  color: var(--color-primary);
}

.logo-text {
  white-space: nowrap;
  overflow: hidden;
}

.config-menu {
  border-right: none;
  height: calc(100vh - 64px - 48px);
  overflow-y: auto;
  overflow-x: hidden;
}

/* 菜单滚动条样式 */
.config-menu::-webkit-scrollbar {
  width: 6px;
}

.config-menu::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
}

.config-menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.config-menu::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 折叠触发器 */
.sider-trigger {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transition: all var(--transition-base);
}

.sider-trigger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-primary);
}

/* 菜单项样式优化 */
:deep(.ant-menu-item),
:deep(.ant-menu-submenu-title) {
  margin: 4px 8px;
  border-radius: var(--border-radius-base);
  transition: all var(--transition-base);
}

:deep(.ant-menu-item-selected) {
  background-color: var(--color-primary) !important;
}

:deep(.ant-menu-item:hover),
:deep(.ant-menu-submenu-title:hover) {
  background-color: rgba(255, 255, 255, 0.08);
}

:deep(.ant-menu-item a) {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  transition: color var(--transition-base);
}

:deep(.ant-menu-item-selected a) {
  color: #fff;
  font-weight: 500;
}

/* ==================== 主布局样式 ==================== */
.main-layout {
  background: var(--color-bg-layout);
}

/* 顶部栏 */
.layout-header {
  background: var(--color-bg-container);
  padding: 0 var(--spacing-lg);
  height: 64px;
  line-height: 64px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  margin: 0;
}

:deep(.header-breadcrumb .ant-breadcrumb-item) {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
}

:deep(.header-breadcrumb .anticon) {
  font-size: 16px;
  color: var(--color-primary);
}

.header-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

/* 内容区 */
.layout-content {
  padding: var(--spacing-lg);
  height: calc(100vh - 64px);
  overflow-y: auto;
}

.content-wrapper {
  max-width: 1600px;
  margin: 0 auto;
}

/* 预览页全宽平铺 */
.content-wrapper.full-width {
  max-width: none;
  width: 100%;
  margin: 0;
}

/* 页面切换动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
  .layout-header {
    padding: 0 var(--spacing-md);
  }

  .layout-content {
    padding: var(--spacing-md);
  }

  .header-breadcrumb {
    font-size: var(--font-size-sm);
  }

  :deep(.ant-breadcrumb-item:not(:last-child)) {
    display: none;
  }
}
</style>
